<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import {
    EButton,
    EFormItem,
    EInput,
    EMessage,
    EUUIDUtil,
} from 'exploria-ui';
import axios from 'axios';

const formData = reactive({
    username: '',
    password: '',
    captchaCode: '',
});

let captchaKey = '';

type Result<T = unknown> = {
    status: 'success' | 'error';
    message: string;
    data: T;
};

const getCaptcha = () => {
    captchaKey = EUUIDUtil.generate();
    axios
        .get<
            Result<{
                imageBase64: string;
            }>
        >('https://lxzj.tenir.cn/lxzj/api/system/user/captcha', {
            params: {
                captchaKey,
            },
        })
        .then((res) => {
            if (res.data.status === 'success') {
                captchaImg.value = res.data.data.imageBase64;
                formData.captchaCode = '';
            }
        });
};

onMounted(() => {
    getCaptcha();
});

onMounted(() => {
    captchaImg.value = 'http://localhost:3000/api/captcha';
});

const login = () => {
    const closeLoading = EMessage.loading('登录中...');
    loading.value = true;

    axios
        .post('https://lxzj.tenir.cn/lxzj/api/system/user/login', {
            username: formData.username,
            password: formData.password,
            captchaKey,
            captchaCode: formData.captchaCode,
        })
        .then((res) => {
            if (res.data.status === 'success') {
                EMessage.success('登录成功');
            } else {
                EMessage.error(res.data.data.message);
            }
        })
        .catch((error) => {
            EMessage.error(error.message);
            getCaptcha();
        })
        .finally(() => {
            closeLoading();
            loading.value = false;
        });
};
const src = ref('');

const loading = ref(false);
const captchaImg = ref('');
</script>

<template>
    <form class="login-form" @submit.prevent="login">
        <EFormItem
            :show-error="!formData.username"
            error-message="用户名不能为空"
        >
            <EInput
                type="text"
                placeholder="用户名"
                v-model="formData.username"
                clearable
            >
                <template #prefix>
                    <span class="iconfont icon-yonghu" />
                </template>
            </EInput>
        </EFormItem>
        <EFormItem
            :show-error="!formData.password"
            error-message="密码不能为空"
        >
            <EInput
                type="password"
                placeholder="请输入密码"
                v-model="formData.password"
                clearable
            >
                <template #prefix>
                    <span class="iconfont icon-mima left" />
                </template>
            </EInput>
        </EFormItem>
        <EFormItem
            :show-error="!formData.captchaCode"
            error-message="验证码不能为空"
        >
            <EInput
                type="captcha"
                placeholder="请输入验证码"
                :src="captchaImg"
                v-model="formData.captchaCode"
            >
                <template #prefix>
                    <span class="iconfont icon-yanzhengyanzhengma" />
                </template>
                <template #suffix>
                    <img :src="src" alt="" @click="getCaptcha" />
                </template>
            </EInput>
        </EFormItem>
        <EButton :loading="loading">注册</EButton>
    </form>
</template>

<style scoped lang="scss">
@import 'iconfont/iconfont.css';

.login-form {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 30px;

    .one-input {
        img {
            cursor: pointer;
        }
    }
}
</style>
